<template>
  <a-layout has-sider>
    <a-layout-sider
        v-model:collapsed="collapsed"
        theme="light"
        :style="{height: '100vh','borderRight':'1px solid rgba(5, 5, 5, 0.08)',position: 'fixed', left: 0, top: 0, bottom: 0 }"
    >
      <div class="logo">
        <div class="flex justify-center gui-padding-s">
          <img src="/imgs/logo.png" style="width:120px;">
        </div>
      </div>
      <!--菜单区域-->
      <a-menu
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          theme="light"
          mode="inline"
          :style="{ height: 'calc(100vh - 50px)', overflow: 'auto', }"
      >
        <template v-for="(menu,index) in menuList" :key="menu.path">
          <a-menu-item :key="menu.path" v-if="menu.children && menu.children.length == 0">
            <nuxt-link :to="menu.path">
              <component :is="menu.icon"></component>
              <span>{{$t(menu.name)}}</span>
            </nuxt-link>
          </a-menu-item>
          <a-sub-menu :key="menu.path" v-else>
            <template #title>
              <span>
                <component :is="menu.icon"></component>
                <span>{{$t(menu.name)}}</span>
              </span>
            </template>
            <template v-if="menu.children && menu.children.length > 0">
              <template  v-for="(cmenu,cindex) in menu.children" :key="cindex">
                <nuxt-link :to="cmenu.path">
                  <a-menu-item :key="cmenu.path">
                    <component :is="cmenu.icon"></component>
                    <span>{{$t(cmenu.name)}}</span>
                  </a-menu-item>
                </nuxt-link>
              </template>
            </template>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: collapsed?'80px':'200px' }">
      <!--头部区域-->
      <a-layout-header
          :style="{ background: '#fff', padding: 0,height:'50px',lineHeight:'50px','border-bottom':'1px solid rgba(5, 5, 5, 0.06)'}">
        <div class="flex justify-content-between" style="padding:0 10px;">
          <div>
            <button @click="handleExpand" v-if="!collapsed">
              <MenuFoldOutlined style="font-size:18px"/>
            </button>
            <button @click="handleExpand" v-else>
              <MenuUnfoldOutlined style="font-size:18px"/>
            </button>
            <!--国际化按钮-->
            <button v-if="locale=='zh'" @click="handleChangeLocale('en')" class="ml20"><GlobalOutlined  style="font-size:18px;color:#666;"/></button>
            <button v-if="locale=='en'" @click="handleChangeLocale('zh')" class="ml20"><GlobalOutlined  style="font-size:18px;color:#666;"/></button>

            <a-dropdown>
              <a class="ant-dropdown-link ml10" >
                <span>当前系统是：{{currentSystem?.sysname}} / {{currentSystem?.id}}</span>
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item v-for="(system,index) in userStore.systemList" :key="system.id"  @click.prevent="handleChangeSystem(system)">
                    <a href="javascript:;"><span v-if="system.active">当前系统是：</span>{{system.sysname}}</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <cc-layout-header></cc-layout-header>
        </div>
      </a-layout-header>
      <!--内容区域-->
      <a-layout-content :style="{  overflow: 'initial'}">
        <div :style="{ height:'calc(100vh - 50px)' , background: '#fff'}">
          <nuxt-page></nuxt-page>
        </div>
      </a-layout-content>
      <!--底部区域-->
      <a-layout-footer :style="{ textAlign: 'center' }" v-if="false">
        <cc-layout-footer></cc-layout-footer>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script setup>
const { locale, setLocale, t } = useI18n()
const route = useRoute()
const openKeys = ref([route.fullPath])
const userStore = useStore.userState()
const currentSystem = ref(userStore.systemList.find(c=>c.active))
const selectedKeys = computed(()=>{
  return [route.fullPath || userStore.indexPath ]
})
const menuList = computed(()=>userStore.menus)
const collapsed = ref(false);
const handleExpand = () => {
  collapsed.value = !collapsed.value
}
// 改变系统
const handleChangeSystem = async (system)=>{
  try {
    if(userStore.systemList.find(c=>c.active).id == system.id)return;
    userStore.systemList.filter(c=>c.active).map(c=>{ c.active=false})
    userStore.systemList.find(c=>c.id==system.id).active = true;
    currentSystem.value = system;
    const resp = await useChangeSystemApi(system)
    userStore.changeSystem(system,resp.data)
    window.location.reload()
    useMessage().success("切换成功!")
  }catch (e){
     useMessage().error("更换系统失败!")
  }
}


// 国际化处理
const handleChangeLocale = (lang)=>{
  // 把选择的语言进行切换
  locale.value = lang
  setLocale(lang)
  // 切换以后记得把本地缓存进行修改，否则只会生效当前，刷新就还原。
  localStorage.setItem('ksd-kva-language', lang)
}

// 用于读取本地缓存存储的语言是什么？
function initReadLocale() {
  locale.value = localStorage.getItem("ksd-kva-language") || 'zh'
  setLocale(locale.value)
}

const handleOpenKeys = ()=> {
  var arr = []
  var currentPath = route.fullPath;
  menuList.value.forEach(menu => {
    if (menu.children && menu.children.length > 0) {
      menu.children.forEach(cmenu => {
        if (cmenu.path == currentPath) {
          arr.push(menu.path)
          return
        }
      })
    }
  })
  arr.push(currentPath)
  openKeys.value = arr
}

watch(locale,()=>{
  initReadLocale()
})

definePageMeta({
  middleware: "md-auth"
})

onMounted(() => {
  initReadLocale()
  handleOpenKeys()
})

</script>
<style scoped>
.logo {
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
  border-right: 1px solid rgba(5, 5, 5, 0.06);
}
</style>
